<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery-1.7.1.js"></script>
<script src="js/jquery-ui-1.8.17.custom.min.js"></script>
<script src="js/jquery.example.js"></script>
<script src="js/jquery.example.min.js"></script>
<script src="popup.js"></script>

<!doctype html>
<html>
	<head>
		<title>Pokemon Browser Popup</title>
		<style>
			body {
				min-width:450px;
				overflow-x:hidden;
			}
			
			img {
				border:2px solid black;
				vertical-align:middle;
				width:75px;
				height:75px;
			}
			
			#feedback {
				font-size:1.4em;
			}
			#selectable .ui-selecting {
				background:#000000;
			}
			#selectable .ui-selected {
				background:#000000;
				color:white;
			}
			#selectable {
				list-style-type:none;
				margin:0;
				padding:0;
			}
			#selectable li {
				margin:3px;
				padding:1px;
				float:left;
				width:100px;
				height:80px;
				font-size:4em;
				text-align:center;
			}
		</style>
	<script>
	$(function() {
		$( "#selectable" ).selectable({
			stop: function() {
				var result = $( "#pokemon-selection-value" ).val(-1);
				$( ".ui-selected", this ).each(function() {
					var index = $( "#selectable li" ).index( this );
					$( "#pokemon-selection-value" ).val(index);
				});
			}
		});
	});
	</script>
		<style media="screen" type="text/css">
		    .defaultText { width: 200px; }
		    .defaultTextActive { color: #a1a1a1; font-style: italic; }
		</style>
		<script>
		$(document).ready(function()
			{
			    $(".defaultText").focus(function(srcc)
			    {
			        if ($(this).val() == $(this)[0].title)
			        {
			            $(this).removeClass("defaultTextActive");
			            $(this).val("");
			        }
			    });
			    
			    $(".defaultText").blur(function()
			    {
			        if ($(this).val() == "")
			        {
			            $(this).addClass("defaultTextActive");
			            $(this).val($(this)[0].title);
			        }
			    });
			    
			    $(".defaultText").blur();        
			});
		</script>
	</head>
	<body>
	Pick your starting Pokemon:
	<br>
	<script src="utilities.js">
	</script>
	<script>
		function firstPokemon()
		{
			//This might fail because the number might be saved as a string? (maybe)
			var pokemon_type = $("#pokemon-selection-value").val();
			var starting_level = 5;
		
			localStorage["pt_pokemon"] = pokemon_type;
			localStorage["pt_pokemon_name"] = $("#name").val();
			var pokemon = generateUserPokemon(starting_level, pokemon_type);
			
			localStorage["pt_level"] = starting_level;
			localStorage["pt_strength"] = pokemon.strength;
			localStorage["pt_hpmax"] = pokemon.hpmax;
			localStorage["pt_exp"] = pokemon.exp;
			localStorage["pt_speed"] = pokemon.speed;
			localStorage["pt_money"] = pokemon.money;
			localStorage["pt_items"] = JSON.stringify({});
			localStorage["pt_history"] = JSON.stringify({});
			localStorage["pt_expToNextLevel"] = pokemon.expToNextLevel;
			localStorage["pt_items"] = JSON.stringify({0:"antidote", 1:"antidote"});

			
			window.close();
		}
	</script>
	
	<form onSubmit="firstPokemon()">
		<div class="pokemon-selection">
			<ol id="selectable">
				<li class="ui-state-default"><img src="Charmander.gif"/></li>
				<li class="ui-state-default"><img src="Squirtle.gif"/></li>
				<li class="ui-state-default"><img src="Bulbasaur.png"/></li>
				<li class="ui-state-default"><img src="Pikachu.gif"/></li>
			</ol>
			<br>
		</div>
		<input class="defaultText" title="Name" id="name" type="text" />
		
		<br>
		
		<input type="hidden" id="pokemon-selection-value"></hidden>
		
		<button onclick="">GO!</button>
	</form>
	
	</body>
</html>